<template>
      <!-- 工具箱 -->
    <div class="task-menuTab"
      :style="{
        transform:'translate3d('+taskMenuTabMove.x+'px,'+taskMenuTabMove.y+'px,1px)',
      }">
      <div class="task-menuTab-drag"
        @mousedown="taskMenuTabMove.taskMenuTabMoveStart"
        @mousemove="taskMenuTabMove.taskMenuTabMoveing"
        @mouseup="taskMenuTabMove.taskMenuTabMoveOver">
        <i class="el-icon-rank"></i> 工具箱
      </div>
      <div class="task-menuTab-body">
        <el-button v-if="taskMenuTabMove.full" 
          icon="el-icon-zoom-out" 
          title="退出全屏" 
          @click="screenOperation('close')" >退出</el-button>
        <el-button v-if="!taskMenuTabMove.full" 
          icon="el-icon-zoom-in" 
          title="全屏编辑" 
          @click="screenOperation('open')" >全屏</el-button>
        <div v-if="false">
          <el-popover
            placement="right"
            width="200"
            trigger="click">
            <div class="task-menuTab-body-subject-type">
              <el-button slot="reference" title="添加单选"
                @click="0">
                暂存本试卷到浏览器
              </el-button>
              <el-button slot="reference" title="添加单选"
                @click="0">
                上传所有题目到题库
              </el-button>
              <el-button slot="reference" title="添加单选"
                @click="0"
                >
                保存本试卷为试卷模板
              </el-button>
            </div>
            <el-button slot="reference" icon="el-icon-upload2" title="暂存" 
              @click="0">暂存</el-button>
          </el-popover>
        </div>
        <div v-if="false">
          <el-popover
            placement="right"
            width="200"
            trigger="click">
            <div class="task-menuTab-body-subject-type">
              <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加单选"
                  @click="addSubject('single')">
                  单选题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('singleData')">
                </el-button>
              </div>
              <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加多选" 
                  @click="addSubject('multiple')">
                  多选题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('multipleData')">
                </el-button>
              </div>
              <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加判断题" 
                  @click="addSubject('judge')">
                  判断题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('judgeData')">
                </el-button>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-if="false">
          <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
            title="设置分数" 
            @click="setQuestionScoreConfig()">
            分数
          </el-button>
        </div>
        <div>
          <el-button slot="reference"  icon="el-icon-plus" title="添加单选"
            @click="addSubject('single')">
            单选
          </el-button>
        </div>
        <div>
          <el-button slot="reference"  icon="el-icon-plus" title="添加多选" 
            @click="addSubject('multiple')">
            多选
          </el-button>
        </div>
        <div>
          <el-button slot="reference"  icon="el-icon-plus" title="添加判断题" 
            @click="addSubject('judge')">
            判断
          </el-button>
        </div>
        <div>
          <el-button slot="reference"  icon="el-icon-plus" title="添加编程题" 
            @click="addSubject('programming')">
            编程
          </el-button>
        </div>
        <div v-if="false">
          <el-popover
            placement="top"
            width="160"
            v-model="visible2">
            <p>重置此试卷？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
              <el-button type="primary" size="mini" @click="refresh">重置</el-button>
            </div>
            <el-button icon="el-icon-refresh" slot="reference">重置</el-button>
          </el-popover>
        </div>
        <div>
          <el-button  icon="el-icon-success" type="primary" title="完事！，提交试卷!" @click="submitPaper()" >提交</el-button>
        </div>
      </div>
    </div>
</template>

<script>
import {BUS} from '../javascript/functions'
import api from '../../../../api'
import {FormData} from '../javascript/formatData'
export default {
  props: ['FormData'],
  data () {
    return {
      visible2: false,
      typeZH: {
        singleData: '单选题型',
        multipleData: '多选题型',
        judgeData: '判断题型'
      },
      taskMenuTabMove: {
        full: false,
        moving: false,
        start: [],
        x: '',
        y: '',
        // 移动事件
        taskMenuTabMoveStart: (e) => {
          const _this = this.taskMenuTabMove
          _this.moving = true
          // 获取初始位置
          if (_this.start.length) {
            _this.x = e.clientX - _this.start[0]
            _this.y = e.clientY - _this.start[1]
          } else {
            _this.start = [e.clientX, e.clientY]
          }
        },
        taskMenuTabMoveing: (e) => {
          const _this = this.taskMenuTabMove
          if (_this.moving) {
            _this.x = e.clientX - _this.start[0]
            _this.y = e.clientY - _this.start[1]
          }
        },
        taskMenuTabMoveOver: (e) => {
          const _this = this.taskMenuTabMove
          _this.moving = false
          _this.x = e.clientX - _this.start[0]
          _this.y = e.clientY - _this.start[1]
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    // 重置试卷， 从formData导入默认数据, 发送事件总线
    refresh () {
      this.visible2 = false
      BUS.$emit('refresh', JSON.parse(JSON.stringify(FormData)))
    },
    // 更新分数
    async updateTotalScore () {
      var s = 0
      var m = 0
      var j = 0
      var p = 0
      await this.FormData.singleData.forEach(_ => {
        s += (_.score)
      })
      await this.FormData.multipleData.forEach(_ => {
        m += (_.score)
      })
      await this.FormData.judgeData.forEach(_ => {
        j += (_.score)
      })
      await this.FormData.programmingData.forEach(_ => {
        p += (_.score)
      })
      this.FormData.totalScore = await (s + m + j + p)
    },
    // 设置题型分数
    setQuestionScore (type) {
      BUS.$emit('openScoreModel', {
        typeZH: this.typeZH[type],
        type: type,
        e: true
      })
    },
    setQuestionScoreConfig () {
      BUS.$emit('openScoreConfigModel', {
        e: true
      })
    },
    // 提交试卷
    submitPaper () {
      if (this.validatePaper()) {
        let passData = {
          section_id: this.FormData.sectionId,
          homeworkId: this.FormData.homework_id,
          title: this.FormData.title,
          selection_problems: this.FormData.selections,
          score: this.FormData.totalScore
        }
        api['updateHomework'](passData).then(res => {
        }).catch((e) => {
        })
      }
    },
    validatePaper () {
      // 验证课程题目是否填写
      if (!this.FormData.title) {
        this.$message({
          message: '试卷题目不能为空',
          type: 'error'
        })
        return false
      }
      // 验证单选、多选、判断题分数是否设置正确
      if (!this.validateScore()) {
        this.$message({
          message: '分数不能为空或零分',
          type: 'error'
        })
        return false
      }
      if (!this.FormData.required) {
        this.$message({
          message: '有题目信息为空',
          type: 'error'
        })
        return false
      }
      let selections = []
      this.FormData.singleData.forEach(element => {
        selections.push(element.id)
      })
      this.FormData.multipleData.forEach(element => {
        selections.push(element.id)
      })
      this.FormData.judgeData.forEach(element => {
        selections.push(element.id)
      })
      if (!this.validateSelections(selections)) {
        this.$message({
          message: '还有题目未完成编辑，请编辑后再提交',
          type: 'error'
        })
        return false
      }
      return true
    },
    // 验证单选、多选、判断题分数已设置且不为0
    validateScore (questions) {
      let valid = true
      this.FormData.singleData.forEach(element => { if (!element.score) { valid = false } })
      this.FormData.multipleData.forEach(element => { if (!element.score) { valid = false } })
      this.FormData.judgeData.forEach(element => { if (!element.score) { valid = false } })
      return valid
    },
    // 验证题目是否完成编辑
    validateSelections (selections) {
      let valid = true
      selections.forEach(e => {
        if (!e) { valid = false }
      })
      return valid
    },
    // 全屏按钮
    screenOperation (type) {
      let obj = document.getElementById('pane-作业' + this.FormData.homework_id).childNodes[4].childNodes[0]
      const option = {
        // 切换全屏
        'open': () => { this.taskMenuTabMove.full = !this.taskMenuTabMove.full },
        'close': () => { this.taskMenuTabMove.full = !this.taskMenuTabMove.full },
        // 切换样式代码
        'fullTaskEidt editTask': () => { obj.className = 'editTask' },
        'editTask fullTaskEidt': () => { obj.className = 'editTask' },
        'editTask': () => { obj.setAttribute('class', 'fullTaskEidt editTask') }
      }
    // 重置位移
      this.taskMenuTabMove.start = []
      this.taskMenuTabMove.x = 0
      this.taskMenuTabMove.y = 0
      /* eslint-disable*/
      this.taskMenuTabMove.moving = false
    // 改变标记状态
      option[type]()
    // 改变 className
      option[obj.className]()
    },
    // 添加题型按钮
    addSubject (type) {
      const option = {
        single: () => {
          this.FormData.singleData.push({
              // 题目
              subject: '请填写单选题题目',
              // 单选选项
              options: [
                '选项A', '选项B', '选项C', '选项D'
              ],
              // 正确答案 学生考试生成的试卷答案为选项
              answer: '选项A',
              // 考生填写的答案
              studentAnswer: '',
              // 解析
              analysis: '',
              // 分值
              score: 5,
              selection_problem_type: 'single',
              // 是否正在编辑
              isEdit: true
            })
          setTimeout(() => {
            document.getElementById('single' + (this.FormData.singleData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
      multiple: () => {
          // 添加模板即可
          this.FormData.multipleData.push({
            // 题目
            subject: '请填写多选题题目',
            // 多选选项
            options: [
              '选项A', '选项B', '选项C', '选项D'
            ],
            // 正确答案
            answer: ['选项A', '选项B'],
            // 考生的答案
            studentAnswer: '',
            // 解析
            analysis: '',
            // 分值
            score: 5,
            selection_problem_type: 'multiple',
            // 是否正在编辑
            isEdit: true
          })
          setTimeout(() => {
            document.getElementById('multiple' + (this.FormData.multipleData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
      judge: () => {
          this.FormData.judgeData.push({
            // 题目
            subject: '请填写判断题题目',
            // 多选选项
            options: [
              '对',
              '错'
            ],
            // 答案
            answer: '对',
            // 考生的答案
            studentAnswer: '',
            // 解析
            analysis: '',
            // 分值
            score: 5,
            selection_problem_type: 'judge',
            // 是否正在编辑
            isEdit: true
          })
          setTimeout(() => {
            document.getElementById('judge' + (this.FormData.judgeData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
      programming: () => {
          this.FormData.programmingData.push(
            {
              // 解析
              analysis: '',
              // 分值
              score: 5,
              // 是否正在编辑
              isEdit: true,
              programmingQuestionInfo: {}
            }  
          )
          setTimeout(() => {
            document.getElementById('program' + (this.FormData.programmingData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
      }
      option[type]()
      // 同步计算分数
      this.updateTotalScore()
    }
  }
}
</script>

<style>

</style>